<template>
    <div>

        <el-form :model="model" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="退货单号" prop="Number">
                        <el-input v-model="model.Number" placeholder="退货单号" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="客户" prop="CustomerName">
                        <el-input v-model="model.CustomerName" placeholder="客户" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人" prop="CustomerContact">
                        <el-input v-model="model.CustomerContact" placeholder="联系人" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            


            <el-row>
                <el-col :span="8">
                    <el-form-item label="联系人电话" prop="CustomerContactTel">
                        <el-input v-model="model.CustomerContactTel" placeholder="联系人电话" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="退入仓库" prop="WarehouseName">
                        <el-input v-model="model.WarehouseName" placeholder="退入仓库" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="付款方式" prop="PaymentCategory">
                        <el-input v-model="model.PaymentCategory" placeholder="付款方式" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
              
                <el-col :span="8">
                    <el-form-item label="付款账户" prop="PaymentAccount">
                        <el-input v-model="model.PaymentAccount" placeholder="付款账户" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="付款日期" prop="PaymentTime">
                        <el-input v-model="model.PaymentTime" placeholder="付款日期" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="退货日期" prop="ReturnDate">
                        <el-input v-model="model.ReturnDate" placeholder="退货日期" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                
                <el-col :span="8">
                    <el-form-item label="总金额" prop="Price">
                        <el-input v-model="model.Price" placeholder="总金额" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="总数量" prop="Count">
                        <el-input v-model="model.Count" placeholder="总数量" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="备注" prop="Remark">
                        <el-input v-model="model.Remark" placeholder="备注" :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="订单状态" prop="Status">
                        <el-tag type="info" v-if="Number(model.Status) === 0">待审核</el-tag>
                        <el-tag type="success" v-else-if="Number(model.Status) === 1">已审核</el-tag>
                        <el-tag type="danger" v-else-if="Number(model.Status) === 2">已退货</el-tag>
                    </el-form-item>
                </el-col>
            </el-row>
            
            
        </el-form>


        <div style="border: 1px solid #dcdfe6; padding: 10px;">
            <h1 style="margin: 10px;">商品</h1>
          
            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
                
                    <el-table-column type="selection" width="55"></el-table-column> 
                    <el-table-column prop="ItemCode" label="商品编码" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="ItemName" label="商品名称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Amount" label="金额" :show-overflow-tooltip="true"></el-table-column>
                    
                    
                    <el-table-column prop="Price" label="商品单价" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="CurrCount" label="当前库存" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="Count" label="数量" :show-overflow-tooltip="true"></el-table-column>
                    
                    <el-table-column prop="Rebate" label="返利" :show-overflow-tooltip="true"></el-table-column>
                    
                    
                    <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
                    

            </el-table>
        </div>
    </div>
</template>




<script>

export default {
    props: {
        model: {
            require: true,
            type: Object,

        }
    },
    data() {
        return {
            tableData: [],
            isLoading: false,
        }
    },
    created() {
        this.GetOrderReturnbyId(this.model.Id);
    },
    methods: {

        GetOrderReturnbyId(Id) {
            
            this.isLoading=true;
            const response =this.$http.get('/api/OrderReturn/GetOrderReturnbyId',{
                params:{
                    OrderReturnId:this.model.Id,
                    
                    WareHouseId:this.model.WarehouseId
                }
                
            })
            
            .then(res => {
                    this.isLoading = false;
                    this.tableData=res.Data;
                    
                })
        }

    }
}
</script>